<template>
	<div class="privacy-policy">
		<div class="main">
			<div class="inner">
				<div class="title">
					<h1>隐私权政策</h1>
				</div>
				<p>
					当您注册以及使用 本网站 时，我们认为您已经阅读并同意以下隐私政策。</p>
				<div class="cib">
					<h2>1. 数据收集目的</h2>
				</div>
				<p>
					我们收集您的部分个人信息和设备信息，以便提供更好的服务。具体包括：<br />
					(1)
					个人信息：如您的邮箱、注册时间等，仅用于身份验证、密码找回和重要通知。<br />
					(2)
					日志数据：包括访问时间、IP地址、访问页面等，用于优化网站性能和分析用户行为。<br />
				</p>
				<div class="cib">
					<h2>2.Cookies 和本地存储的使用 </h2>
				</div>
				<p>
					为了提供更好的用户体验，我们会使用 cookies 和 localStorage 来存储您的偏好设置、图片缓存等。
                    您可以通过浏览器设置禁用 cookies 或清除浏览器缓存，但这可能会影响某些功能的使用。
					<br />
					您可以通过浏览器设置禁用 cookies 或清除浏览器缓存，但这可能会影响某些功能的使用。
					<br />
				</p>
				<div class="cib">
					<h2>3. 变更通知</h2>
				</div>
				<p>
					本网站 保留随时修改 隐私权政策 的权利。<br />
					若隐私政策发生重要变更我们会通过官方公告的方式或其他有效渠道向您进行通知。<br />
					用户继续使用本服务的，视为自动接受新的隐私政策。
				</p>
				<br />
				<br />
				<p>更新日期：2025年9月1日</p>
			</div>
		</div>
	</div>
</template>

<script setup>
import Header from "../components/Header.vue";
</script>

<style lang="scss" scoped>
.privacy-policy {
	display: flex;
	position: relative;
	flex-flow: column nowrap;
	min-height: 100vh;
}

.main {
	flex: 1 1 auto;
	position: relative;
	width: 100%;
	max-width: 100vw;
	min-width: 100%;
	.inner {
		width: 100%;
		max-width: 26.75rem;
		margin-left: auto;
		margin-right: auto;
		padding-left: 1rem;
		padding-right: 1rem;
		margin-bottom: 6px;
		.title {
			height: 4rem;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 2rem;
			h1 {
				font-size: 1.25rem;
				font-weight: 400;
				line-height: 1.5;
				letter-spacing: 0.05em;
			}
		}
		p {
			font-size: 1rem;
			font-weight: 400;
			line-height: 2;
			letter-spacing: 0.05em;
		}
		.cib {
			height: 4rem;
			display: flex;
			align-items: center;
		}
		h2 {
			font-size: 1rem;
			font-weight: 400;
			line-height: 1.5;
			letter-spacing: 0.05em;
		}
	}
}

@media screen and (min-width: 768px) {
	.main {
		.inner {
			max-width: 48rem;
			padding-left: 1rem;
			padding-right: 1rem;
		}
	}
}

@media screen and (min-width: 1280px) {
	.main {
		.inner {
			max-width: 61.5rem;
			padding-left: 0rem;
			padding-right: 0rem;
		}
	}
}
</style>